<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../../pqgrid/pqgrid.min.css" />
    <script src="../../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../../pqgrid/themes/office/pqgrid.css" />

<script>
    
    $(function () {
        //$grid.pqGrid("option", $.paramquery.pqGrid.regional[locale]);
        //debugger;
        $.extend($.paramquery.pqGrid.prototype.options, $.paramquery.pqGrid.regional['es']);
        $.extend($.paramquery.pqPager.prototype.options, $.paramquery.pqPager.regional['es']);

        var colModel = [
		{ title: "Title", dataType: "string", width: "150", dataIndx: 1 },
		{ title: "Rights", dataType: "string", width: 150, dataIndx: 2 },		
        { title: "Price", dataType: "float", width: 70, dataIndx: 3, align:"right", render:function(ui){
            var rowData=ui.rowData, cV=rowData[3];            
            return "$"+cV;
        } },		
		{ title: "Content", width: 320, dataIndx: 4 },
        { title: "Artist", dataType: "string", width: 120, dataIndx: 0 }
		];

        var dataModel = {
            cache: true,
            location: "remote",
            //paging: "local",            
            sortDir: "down",
            sorting: "local",
            dataType: "xml",
            getUrl: function () {
                return { url: "/Content/apple-albums.xml" };
            },
            getData: function (dataDoc) {
                //debugger;
                $(dataDoc).find("price").each(function(i,pNode){
                    var txt=$(pNode).text();
                    txt=txt.replace("$","");
                    $(pNode).text(txt);                    
                });
                var obj = { itemParent: "entry", itemNames: ["artist", "title", "rights", "price", "content" ] };
                return { data: $.paramquery.xmlToArray(dataDoc, obj) };
            }
        };
        var obj={ width: 700, height: 0,
            dataModel: dataModel,
            colModel: colModel,
            columnBorders: true,
            direction:"",
            title: "<b>Albums Feed Reader</b>",
            flexHeight: true,
            flexWidth: true,            
            draggable: true,
            scrollModel: {horizontal:false},
	        freezeCols: 0
        };
        obj.pageModel={
            type:"local",
            rPP: 1,
            rPPOptions: [1, 2, 5, 10, 20, 100]
        };
        var $grid=$("div#grid-localize").pqGrid(obj);             
        $("#select-locale").change(function(evt){
            var locale=$(this).val();
            $grid.pqGrid("option", $.paramquery.pqGrid.regional[locale]);
            //$.paramquery.pqGrid.setDefaults($.paramquery.pqGrid.regional[locale]);
            $grid.find(".pq-pager").pqPager("option", $.paramquery.pqPager.regional[locale]);
            //$.paramquery.pqPager.setDefaults($.paramquery.pqPager.regional[locale]);
        });
    });    

        
</script>    
</head>
<body>

<div style="width:200px;margin:15px auto;">
    Select Locale: 
    <select id="select-locale">
        <option value="zh">Chinese</option>
        <option value="nl">Dutch</option>
        <option value="en" selected="">English</option>
        <option value="de">German</option>
        <option value="hu">Hungarian</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="es">Spanish</option>                        
    </select>
</div>
<div id="grid-localize" style="margin:auto;"></div>

</body>

</html>
